<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cvs {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <canvas id="cvs" width="600" height="400"></canvas>

</body>
<script>
    //获取canvas元素
    const cvsDom = document.querySelector('#cvs')

    //生成canvas绘制元素
    const context = cvsDom.getContext('2d')


    //开始绘制路径
    context.beginPath();
    //绘制圆
    context.arc(250, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.stroke();


    context.beginPath();
    context.arc(250, 200, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.stroke();


    context.font = '50px sans-serif';

    //填充色
    context.fillStyle = '#f00';

    //描边色
    context.strokeStyle = '#000';

    //绘制文字
    context.fillText('全栈2106A', 100, 50);
    context.strokeText('全栈2106A', 100, 50);


    //创建一个图像实例
    const img = new Image()

    //监听img加载完成，再将img合并给canvas画布
    img.onload = function() {
        console.log('onload')
            //进行图像合成
        context.drawImage(img, 210, 140, 100, 50);
    }

    //为img添加src路径
    img.src = './imgs/baidu.png'
</script>

</html>